<template> 
	<scroll-view class="productBox flex"> 
		<view class="productItem" :style="'width:'+(windowWidth/2-20)+'px'"  v-for="(item,index) in productArr">
			<view class="topListImg" >
				<image src="https://o2o-demo-img.oss-cn-hangzhou.aliyuncs.com/upload/adver/000/000/001/590bea9fbeb34118.jpg" 
				:style="'width:'+(windowWidth/2-20)+'px;height:'+(windowWidth/2-20)+'px'"></image>
			</view>
			<view class="productTxt">
				<view class="p_txt">八核电脑i7级GTX高配...</view>
				<view class="price_sale">
					<text class="CurrencySymbol">{{ CurrencySymbol }} </text>
					<text class="price">{{ item.price }}666</text>
					<text class="sale">{{ item.saled }}1.7万已付款</text> 
				</view>
				<view class="lab_span">
					<text class=""><label class="">领券</label>满99元减10元</text>
					<text class="lab1">新品</text><text class="lab1">新品</text>
				</view>
			</view> 
		</view> 
	</scroll-view>
</template>

<script>
	const { windowWidth, windowHeight,screenHeight } = uni.getSystemInfoSync(); 
	export default{
		data(){
			return{
				windowWidth:windowWidth,
				CurrencySymbol:'￥',
				productArr:[
					{
						
					},
					{
						
					},
					{
						
					},
					{
						
					}
				]
			}
		},
		onLoad() { 
		},
		created() {
			console.log(windowWidth,'windowWidth')
		}
	}
</script>

<style scoped>
	@import url("./css/common.css");
	.productBox{ 
		padding: 0 10px;  
	}
	.productBox .productItem{   
		margin: 0 5px;
		background-color: #fff;
		border-radius:10rpx;
		padding-bottom: 10rpx;
		display: inline-block;
		margin-bottom: 20rpx;
	}
	.productBox .productItem:nth-child(2n){
		 
	}
	.productBox .productItem .topListImg image{
		width: 100%;
		border-radius:10rpx 10rpx 0 0;
	}
	.productBox .productTxt{
		padding: 10rpx;
	}
	.productBox .productTxt .p_txt{
		font-size:26rpx; 
		font-weight:500;
		color:rgba(51,51,51,1);  
	}
	.productBox .productTxt .price_sale .CurrencySymbol{
		color: #DE3F27;
		font-size:22rpx;
	}
	.productBox .productTxt .price_sale .price{
		font-size:32rpx; 
		font-weight:bold;
		color:rgba(222,63,39,1);
	}
	.productBox .productTxt .price_sale .sale{
		font-size:22rpx; 
		font-weight:500;
		color:rgba(153,153,153,1);
	}
	.productBox .productTxt .lab_span text{
		color: #DE3F27;
		font-size:18rpx; 
		font-weight:500;
		color:rgba(222,63,39,1);
		line-height:34rpx; 
		border:1px solid #DE3F27;
		margin-right: 10rpx;
		border-radius: 8rpx; 
		display: inline-block;
	}
	.productBox .productTxt .lab_span text.lab1{
		padding: 0 10rpx;
	}
	.productBox .productTxt .lab_span label{
		background-color: #fcebe9;
		padding: 0 10rpx;
		border-right: 1px dashed #DE3F27;
		margin-right: 10rpx;
	}
</style>
